<!doctype html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      margin-top: 30px;
      width: 500px;
    }
  </style>
</head>

<body>
  <div class="container"> 
    <h1 style="text-align:center;">注册</h1>
    <form method="POST" action="#" class="form">
      {% csrf_token %}
      {# 不采用 class="form-horizontal" 时需要删除多余的 col-md-* 类，否则无效 #}
      {% for field in form %}
        <div class="form-group">
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          {% if field.name == 'code' %}
            <div>
              <div class="col-md-8" style="padding-left: 0;">{{ field }}</div>
              <input class="col-md-4 btn btn-warning" type="submit" value="点击获取验证码">
            </div>
          {% else %}
            <div>{{ field }}</div>
          {% endif %}
          {# <div class="has-errors">{{ field.errors }}</div> #}
        </div>
      {% endfor %}
      <div class="form-group">
        {# 最下面的 注册 按钮与上方元素距离为0，设置 css margin-top 以修正， #}
        <input type="submit" value="注册" style="margin-top:15px" class="btn btn-primary">
      </div> 
    </form>
</body>

</html>
